<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    table{
       width:620px;
       border:3px solid #ccc;
       border-collapse: collapse;
       margin:0 auto;
       margin-top:20px;
    }
    
    table th,table td{
        border:1px solid #ccc;
    }
    
    div.page-bar a{
       display: inline-block;
       margin-right:3px;
    }
    
    div.go-bar input{
       width:30px;
    }
</style>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
    	 //页面加载完毕后执行
    	$.ajax({
    		/* 请求路径 RequestMapping*/
    		url:"/mvc-demo08/emp/list",
    		/*请求类型  Get Post Put Delete  restful*/
    		type:"GET",
    		/*服务器返回的数据类型*/
    		dataType:"JSON",
    		/*请求成功后执行的函数*/
    		success:function(data){//data是服务器返回的数据
    			   loadTable(data);
    		},
    		error:function(error){
    			  alert("请求数据失败");
    		}
    		
    	});
    });
    
    //声明一个全局的变量保存当前的pageBean
    var pb; //在script里面所有的地方都可以调用
    
    //页码加载数据
    function loadTable(data){
    	 pb = data.pageBean;
    	//清空原来的数据  gt  greater than
    	//清空员工数据
    	$("table tr:gt(0)").remove();
    	//清空页码
    	$("div.page-bar a").remove();
    	 //加载新的数据
    	  console.log(data);
	      var pageBean = data.pageBean
	      var es = pageBean.list;
	      //员工数据
	      for(var i=0 ;i<es.length;i++){
	    	       var e = es[i];
	    	       //处理部门和经理为null的情况
	    	       var dname = e.dept==null?'':e.dept.dname;
	    	       var mname = e.mgr==null?'':e.mgr.ename;
	    	       
	    	       var $tr = 
	    	          $("<tr><td>"+e.empno+"</td><td>"+e.ename+"</td>"
	    	        		  +"<td>"+e.esex+"</td><td>"+e.eage+"</td>"
	    	        		  +"<td>"+e.esalary+"</td><td>"+dname+"</td>"
	    	        		  +"<td>"+mname+"</td>"
	    	        		  +"<td><a href='#'>修改</a><a href='#'>删除</a></td></tr>");  		    	       
	    	       $("table").append($tr);
	      }
	      //页码
	      //首页
	      $("div.page-bar").append("<a href='javascript:chang·ePage(1);'>首页</a>");
	      //上一页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.previousPage+");'>上一页</a>");
	      //数字页码
	       for(var i=1;i<=pageBean.last;i++){
	    	   $("div.page-bar").append("<a href='javascript:changePage("+i+");'>"+i+"</a>");
	       }
	      //下一页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.nextPage+");'>下一页</a>");
	      //尾页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.last+");'>尾页</a>");
          //刷新总页数
          $("#totalPages").html(pageBean.totalPages);
                                                                                                                                                           
    }
    
    
    //跳转页面
    function changePage(no){
    	 //获得表单dom对象
    	 $("#searchForm  input[name=pageNo]").val(no);
    	 //使用ajax提交表单
    	 $.ajax({
    		  url:"/mvc-demo08/emp/list",
    		  type:"POST",
    		  data:$("#searchForm").serializeArray(),
    		  dataType:"JSON",
    		  success:function(data){
    			    loadTable(data);
    		  },
    		  error:function(error){
    			    alert("请求数据失败...");
    		  }
    	 });
    }
    
     //输入页码,跳转到指定的页面
      function goPage(){
    	     //获得用户输入的页码
    	     var no = $("div.go-bar input[name=goNo]").val();
    	     if(no<1 || no>pb.last||isNaN(no)){
    	    	   alert("请输入正确的页码");
    	    	  //清空goNo input框
    	    	  $("div.go-bar input[name=goNo]").val("");
    	    	 return;
    	     }
    	     changePage(no);    	     
      }
	//点击搜索按钮
	function doSearch(){
		//搜索之前将表单的pageNo强制修改为1
		$("#searchForm input[name=pageNo]").val("1");
		
		$.ajax({
		  url:"/mvc-demo08/emp/list",
  		  type:"POST",
  		  data:$("#searchForm").serializeArray(),
  		  success:function(data){
		    loadTable(data);
	  },
	  error:function(error){
		    alert("请求数据失败...");
	  }
		});
	}
</script>
</head>
<body>
    <p align="center">员工列表</p>
    <p align="center"><a href="/mvc-demo08/view/AddEmp.html">添加员工</a></p>
    <div align="center">
       <form id="searchForm">
         <input name="pageNo" type="hidden" value="1"/>
          <input name="pageCondition"/>
          <select name="pageSize">
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
          </select>
          <input type="button" value="搜索" onclick="doSearch();"/>
       </form>
    </div>
     <table>
         <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>部门</th>
            <th>经理</th>
            <th>操作</th>
         </tr>
     </table>
     <div class="page-bar" align="center">
        
     </div>
     <div align="center" class="go-bar">
        <button onclick="goPage()">go</button>第
        <input name="goNo"/>页/共<span id="totalPages"></span>
     </div>
</body>
</html>